<template>
  <div class="settlementDetail">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="180" :model="formData" inline>
        <h3 class="title">对账信息</h3>
        <FormItem label="差异：" style="width:32%">
          <div v-if="!formData.errorAmount || formData.errorAmount == '0'">0</div>
          <div v-else class="titleAmount">{{ formData.errorAmount > 0 ? `+${formData.errorAmount / 100}元` : `${formData.errorAmount / 100}元` }}</div>
        </FormItem>
          <FormItem label="差异原因：" style="width:32%" v-if="!dataList.length">
            <div>{{ formData.remark }}</div>
          </FormItem>
        <FormItem label="对账时间：" style="width:32%">
          <div>{{ formData.reconciliationTime }}</div>
        </FormItem>
        <FormItem label="处理时间：" style="width:32%">
          <div>{{ formData.last_upd_dt }}</div>
        </FormItem>
        <FormItem label="操作人：" style="width:32%">
          <div>{{ formData.last_upd_by }}</div>
        </FormItem>
      </Form>

      <div class="orderDetele" v-if="formData.reconciliationStatus == 'upsuccess'">
        <h3>子订单标记信息</h3>
        <Table border v-if="" :columns="columns" :data="dataList" width="800"></Table>
      </div>
      <Form :ref="formRef" :label-width="180" :model="payData" inline>
        <h3>支付订单详情</h3>
        <div class="childerList">
          <FormItem label="支付订单号：" style="width:32%">
            <div>{{ payData.paymentId }}</div>
          </FormItem>
          <FormItem label="银行支付流水：" style="width:32%">
            <div>{{ payData.payChannelOrderid }}</div>
          </FormItem>
          <FormItem label="渠道支付订单号：" style="width:32%">
            <div>{{ payData.flowId }}</div>
          </FormItem>
          <FormItem label="支付渠道：" style="width:32%">
            <div>{{ payData.payChannelCn }}</div>
          </FormItem>
          <FormItem label="交易方式：" style="width:32%">
            <div>{{ payData.payWayCn }}</div>
          </FormItem>
          <FormItem label="交易类型：" style="width:32%">
            <div>{{ payData.transactionTypeCn }}</div>
          </FormItem>
          <FormItem label="通道费率：" style="width:32%">
            <div>{{ (payData.rate||0) + '%' }}</div>
          </FormItem>
          <FormItem label="通道费：" style="width:32%">
            <div>{{ payData.serviceCharge | moneyNUm }}</div>
          </FormItem>
          <FormItem label="交易金额：" style="width:32%">
            <div>{{ Math.abs(payData.payAmount) | moneyNUm }}</div>
          </FormItem>
          <FormItem label="优惠金额：" style="width:32%">
            <div>{{ payData.discount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="创建时间：" style="width:32%">
            <div>{{ payData.createTime }}</div>
          </FormItem>
          <FormItem label="交易时间：" style="width:32%">
            <div>{{ payData.payTime }}</div>
          </FormItem>
          <FormItem label="子订单数量：" style="width:32%">
            <div>{{ payData.orderNum }}</div>
          </FormItem>
          <FormItem label="付款人信息：" style="width:32%">
            <div>{{ payData.openid }}</div>
          </FormItem>
          <FormItem label="付款ID：" style="widt
          h:32%">
            <div>{{ payData.uid }}</div>
          </FormItem>
        </div>

        <h3>银行账单详情</h3>
        <div class="childerList">
          <FormItem label="商户订单号：" style="width:32%">
            <div>{{ bankData.merOrderNo }}</div>
          </FormItem>
          <FormItem label="银行流水号：" style="width:32%">
            <div>{{ bankData.payChannelOrderid }}</div>
          </FormItem>
          <FormItem label="第三方订单号：" style="width:32%">
            <div>{{ bankData.originalFlowId }}</div>
          </FormItem>
          <FormItem label="支付方式：" style="width:32%">
            <div>{{ bankData.payWayCn }}</div>
          </FormItem>
          <FormItem label="交易类型：" style="width:32%">
            <div>{{ bankData.transactionTypeCn }}</div>
          </FormItem>
          <FormItem label="交易币种：" style="width:32%">
            <div>{{ bankData.transactionCurrency }}</div>
          </FormItem>
          <FormItem label="交易日期：" style="width:32%">
            <div>{{ bankData.payTime }}</div>
          </FormItem>
          <FormItem label="交易时间：" style="width:32%">
            <div>{{ bankData.payTime }}</div>
          </FormItem>
          <FormItem label="付款人信息：" style="width:32%">
            <div>{{ bankData.payerInformation }}</div>
          </FormItem>
          <FormItem label="付款银行：" style="width:32%">
            <div>{{ bankData.payingBank }}</div>
          </FormItem>
          <FormItem label="交易金额：" style="width:32%">
            <div>{{ Math.abs(bankData.payAmount) | moneyNUm }}</div>
            <!-- <div>{{ bankData.payAmount ? `${bankData.payAmount / 100}元` : '0' }}</div> -->
          </FormItem>
          <FormItem label="手续费：" style="width:32%">
            <div>{{ bankData.serviceCharge | moneyNUm }}</div>
          </FormItem>
          <FormItem label="结算金额：" style="width:32%">
            <div>{{ bankData.settlementAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="费率：" style="width:32%">
            <div>{{ (bankData.rate||0) + '%' }}</div>
          </FormItem>
          <FormItem label="订单原始金额：" style="width:32%">
            <div>{{ bankData.originalOrderAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="免充值优惠劵金额：" style="width:32%">
            <div>{{ bankData.freeRechargeCouponAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="企业红包金额：" style="width:32%">
            <div>{{ bankData.businessRedEnvelope | moneyNUm }}</div>
          </FormItem>
          <FormItem label="企业红包退款金额：" style="width:32%">
            <div>{{ bankData.refundBusinessRedEnvelope | moneyNUm }}</div>
          </FormItem>
          <FormItem label="平台优惠金额：" style="width:32%">
            <div>{{ bankData.platformPreferentialAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="账单日期：" style="width:32%">
            <div>{{ bankData.statementDate }}</div>
          </FormItem>
          <FormItem label="完成日期：" style="width:32%">
            <div>{{ bankData.completionDate }}</div>
          </FormItem>
          <FormItem label="清分日期：" style="width:32%">
            <div>{{ bankData.clearingDate }}</div>
          </FormItem>
          <FormItem label="清分账号：" style="width:32%">
            <div>{{ bankData.clearingAccount }}</div>
          </FormItem>
          <FormItem label="清分结果：" style="width:32%">
            <div>{{ bankData.clearingResult }}</div>
          </FormItem>
        </div>
      </Form>

      <Form :ref="formRef" :label-width="180" :model="formBankData" inline>
          <FormItem label="商品名称：" style="width:32%">
            <div>{{ formBankData.goodsName }}</div>
          </FormItem>
          <FormItem label="门店名称：" style="width:32%">
            <div>{{ formBankData.storeName }}</div>
          </FormItem>
          <FormItem label="门店编号：" style="width:32%">
            <div>{{ formBankData.storeNo }}</div>
          </FormItem>
          <FormItem label="收银员：" style="width:32%">
            <div>{{ formBankData.cashier }}</div>
          </FormItem>
          <FormItem label="原交易商户订单号：" style="width:32%">
            <div>{{ formBankData.originalMerOrderId }}</div>
          </FormItem>
          <FormItem label="原交易银行流水号：" style="width:32%">
            <div>{{ formBankData.originalPayChannelOrderid }}</div>
          </FormItem>
          <FormItem label="原交易第三方的订单号：" style="width:32%">
            <div>{{ formBankData.originalFlowId }}</div>
          </FormItem>
          <FormItem label="业务种类：" style="width:32%">
            <div>{{ formBankData.businesType }}</div>
          </FormItem>
          <!-- <FormItem label="商户保留域：" style="width:32%">
            <div>{{ formBankData.merchant_reservation_domain }}</div>
          </FormItem> -->
          <FormItem label="收款方备注：" style="width:32%">
            <div>{{ formBankData.payeeRemarks }}</div>
          </FormItem>
          <FormItem label="付款方备注：" style="width:32%">
            <div>{{ formBankData.payerRemarks }}</div>
          </FormItem>
          <FormItem label="退款备注：" style="width:32%">
            <div>{{ formBankData.refundRemarks }}</div>
          </FormItem>


        <h3>订单详情</h3>
        <div class="childerList" v-for="item in orderDataList" :key="item.orderId">
          <FormItem label="主订单：" style="width:32%">
            <div>{{ item.orderId }}</div>
          </FormItem>
          <FormItem label="订单金额：" style="width:32%">
            <div>{{ item.orderAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="支付金额：" style="width:32%">
            <div>{{ item.payAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="优惠金额：" style="width:32%">
            <div>{{ item.discount | moneyNUm }}</div>
          </FormItem>
          <FormItem label="商户名称：" style="width:32%">
            <div>{{ item.merchantName }}</div>
          </FormItem>
          <FormItem label="商户编码：" style="width:32%">
            <div>{{ item.merchantCode }}</div>
          </FormItem>
          <div v-for="(data, index) in item.subOrders" :key="index">
          <FormItem class="textColorGray" :label="`子订单${index +1}:`" style="width:32%">
            <div>{{ data.subOrderId }}</div>
          </FormItem>
          <FormItem class="textColorGray" label="商品名称：" style="width:32%">
            <div>{{ data.productName }}</div>
          </FormItem>
          <FormItem class="textColorGray" label="商品金额：" style="width:32%">
            <div>{{ data.subOrderAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem class="textColorGray" label="支付金额：" style="width:32%">
            <div>{{ data.payAmount | moneyNUm }}</div>
          </FormItem>
          <FormItem class="textColorGray" label="商品优惠金额：" style="width:32%">
            <div>{{ data.discount | moneyNUm }}</div>
          </FormItem>
          <FormItem class="textColorGray" label="优惠券类型：" style="width:32%">
            <div>{{ data.couponType }}</div>
          </FormItem>

          </div>
        </div>
      </Form>
      <Button type="primary" @click="goBack">返回</Button>
    </Loading>
  </div>
</template>

<script>
import config from "@/utils/config";
import { namespace } from "../Module/settlementDetail";
import {
  Input,
  Button,
  Form,
  FormItem,
  Table,
  Message
} from "view-design";
import Loading from "@/components/Loading";
import Uuid from "uuid";
import Authc from "@/components/Authc";

export default {
  name: 'settlementDetailForm',
  components: {
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Authc,
    Table,
    Message
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (res.ret === 0) {
      this.formData = res.data;
      this.payData = res.data.paymentOrderRes || {};
      this.bankData = res.data.bankRes || {};
      if (res.data.order_list_res.length) {
        this.orderDataList = res.data.order_list_res;
      } else {
        this.orderDataList = [{subOrders: [{}]}];
      }
      this.formBankData = res.data.bankRes || {};
    }
  },
  data () {
    return {
      formRef: Uuid.v1(),
      formData: {}, // 订单信息
      formBankData: {}, /** 银行账单详情 - 商品信息 */
      payData: {}, /** 支付订单 */
      bankData: {}, /** 银行账单 */
      orderDataList: [], /** 订单详情 */
      dataList: [], /** 子订单标记信息 */
      columns: [
        {
          title: "子订单号",
          key: "subOrderId",
          minwidth: 150,
          align: "center"
        },
        {
          title: "差异原因",
          key: "errorReason",
          minwidth: 150,
          align: "center"
        },
        {
          title: "备注",
          key: "errorRemark",
          minwidth: 150,
          align: "center"
        },
        {
          title: "差异金额",
          key: "errorAmount",
          minwidth: 150,
          align: "center",
          render: (h, params) => {
            return h('span', params.row.errorAmount / 100)
          },
        }
      ]
    };
  },
  created () {
    this.getChilderOrder();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async getChilderOrder () {
      try {
        let params = {
          flowId: this.$route.query.flowId
        }
        let res = await this.$store.dispatch(`${namespace}/childerOrder`, params);
        if (res.data.ret === 0) {
          this.dataList = res.data.data || [];
        }
      } catch (error) {
        this.$Message.error({
          content: error
        });
      }
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  },
  filters: {
    moneyNUm (num) {
      if (num == 0 || !num) {
        return '0.00';
      } else {
        console.log(num, '44')
        num = parseFloat(num / 100);
        num = num.toFixed(2);
        num = num.toLocaleString();
        if (num.indexOf('.') < 0) {
          num = num + '.00';
        }
        return num;
        // let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        // return reg.test(val)
      }
    }
  }
};
</script>

<style lang="less" scoped>
.settlementDetail {
  .orderDetele {
    margin: 16px 0;
  }
}
</style>
 <style  lang="less" >
.settlementDetail {
  .title {
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .titleAmount {
    color: red;
  }
  .childerList {
    border-top: 1px solid #999;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
  }
  .ivu-btn-primary {
    margin-bottom: 20px;
  }
  .ivu-form-item {
      margin-bottom: 10px;
  }
  .textColorGray,
  .textColorGray .ivu-form-item-label {color:#a3a3a3}
}
</style>
